<script setup lang="ts">
import { useUserStore } from "./store/user";
import { storeToRefs } from "pinia";

const store = useUserStore();

const { name, age, sex } = storeToRefs(store);

const updataStore = () => {
    store.name = '张三';
    console.log(store);
    console.log(name);
}
const resetStore = () => {
    store.$reset();
}
const patchStore = () => {
    store.$patch({
        name: '李四',
        age: 100,
    });
}

const setStoreName = () => {
    store.saveName('哇呜')
}

</script>

<template>
    <div>姓名：{{ name }}</div>
    <div>调用其他getter：{{ store.getNameAndAge }}</div>
    <div>年龄：{{ age }}</div>
    <div>新年龄：{{ store.getAddAge }}</div>
    <div>新年龄(传参)：{{ store.getAddAges(50) }}</div>
    <div>性别：{{ sex }}</div>


    <div>
        <button @click="updataStore()">更改store数据</button>
        <button @click="resetStore()">重置store数据</button>
        <button @click="patchStore()">批量修改store数据</button>
    </div>
    <div>
        <button @click="setStoreName()">处理业务逻辑（更改姓名）</button>
    </div>


</template>

<style scoped>

</style>
